<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div class="dataScreen-header">
        <div class="header-text">2024青春芒果夜暨动感地带芒果卡周年音乐盛典网络保障</div>
      </div>
      <div class="dataScreen-main">
        <div class="dataScreen-lf">
          <div class="dataScreen-top">
            <BoxWrap title="内场草坪区">
              <Line :data-groups="showData.内场草坪区?.val" :show-time="showTime" />
            </BoxWrap>
          </div>
          <div class="dataScreen-center">
            <BoxWrap title="内场看台区">
              <Line :data-groups="showData.内场看台区?.val" :show-time="showTime" />
            </BoxWrap>
          </div>
          <div class="dataScreen-bottom">
            <BoxWrap title="外围区域">
              <Line :data-groups="showData.外围区域?.val" :show-time="showTime" />
            </BoxWrap>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="dataScreen-map">
            <BoxWrap title="当前总览">
              <CTop :data="showData.总览" />
            </BoxWrap>
          </div>
          <div class="dataScreen-cc">
            <TimeLine :times="schedule" :show-time="showTime" @time-selected="handleTimeSelected" />
          </div>
          <div class="dataScreen-cb">
            <BoxWrap title="TOPN异常小区监控">
              <CBottom :tables="showData.TOPN异常小区" />
            </BoxWrap>
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="dataScreen-top">
            <BoxWrap title="流量监控">
              <Bar :data="showData.流量" />
            </BoxWrap>
          </div>
          <div class="dataScreen-center">
            <BoxWrap title="用户数监控">
              <Bar :data="showData.用户数" />
            </BoxWrap>
          </div>
          <div class="dataScreen-bottom">
            <BoxWrap title="故障监控">
              <Bar :data="showData.故障" />
            </BoxWrap>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Show">
import { ref, onMounted, onBeforeUnmount } from "vue";
import BoxWrap from "./BoxWrap.vue";
import Line from "./line.vue";
import CTop from "./CTop.vue";
import CBottom from "./CBottom.vue";
import Bar from "./bar.vue";
import TimeLine from "./timeline.vue";
import { GetShowAPI } from "@/api/modules/show";

const showData = ref<any>([]);
const showTime = ref<any>("");
// 定义时间表
const schedule = ["16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"];
let intervalId: any = null;
const getCurrentHourSchedule = () => {
  const time_arr = [] as any[];
  const now = new Date();
  const currentHour = now.getHours();
  const currentMinute = now.getMinutes();
  // 判断当前小时是否在时间表中
  for (let i = 0; i < schedule.length; i++) {
    const [scheduleHour, scheduleMinute] = schedule[i].split(":").map(num => parseInt(num, 10));
    if (currentHour === scheduleHour) {
      if (currentMinute >= scheduleMinute) {
        time_arr.push(schedule[i]);
      }
    }
  }
  // 如果当前时间不在时间表中，返回空数组或其他合适的值
  return time_arr;
};

const initShow = () => {
  console.log("initShow");
  const currentTime = getCurrentHourSchedule();
  if (currentTime.length > 0) {
    showTime.value = currentTime[currentTime.length - 1];
  } else {
    showTime.value = schedule[0];
  }
};

const handleTimeSelected = (time: string) => {
  showTime.value = time;
  GetShowAPI({ showTime: time }).then(res => {
    showData.value = res.data;
    console.log(res.data);
  });
};

const dataScreenRef = ref<HTMLElement | null>(null);
onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
  initShow();
  intervalId = setInterval(initShow, 60000); // 每分钟执行一次
});

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
#tsparticles {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
